<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/private_chat_new.css?v={:config('other.ui_version')}" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/group_chat.css?v={:config('other.ui_version')}" media="all">
    <style>
        .chat_right {
            width: 100%;
            margin-left: 0px;
        }
        .chat_session {
            height: 100%;
        }
        .chat_session .session_area {
            padding: 0px;
        }
        .session_area .total_title {
            display: block;
            clear: both;
            overflow: hidden;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            font-weight: bold;
            color: #000;
            margin-bottom: 10px;
        }
        .session_area .total_title span {
            border-radius: 10px;
            background-color: #EC6353;
            padding: 2px 5px;
            font-size: 12px;
            color: #FFF;
            margin-left: 5px;
        }

        .session_area .anchor_search{
            display: block;
            clear: both;
            overflow: hidden;
            padding:0px 10px 10px 10px;
        }
        .session_area .anchor_search input{
            display: block;
            clear: both;
            overflow: hidden;
            width: calc(100% - 10px);
            padding:0px 5px;
            font-size: 12px;
            height:20px;
            line-height: 20px;
            border:1px solid #CCC;
            border-radius: 10px;
        }

        .chat_not_log {
            display: block;
            clear: both;
            overflow: hidden;
            line-height: 100px;
            text-align: center;
            color: #999999;
        }

        .Separator {
            position: relative;
            z-index: 1;
            height: 1px;
            margin: 0;
            margin-top: 0.5em;
            margin-bottom: 2em;
            pointer-events: none;
            text-align: center;
        }
        .Separator .separator__hr {
            position: relative;
            z-index: 5;
            top: 1em;
            border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
            margin: 0;
        }

        .Separator .separator__text {
            position: relative;
            z-index: 5;
            display: inline-block;
            padding: 0 1em;
            background: var(--center-channel-bg);
            border-radius: 50px;
            color: var(--center-channel-color);
            line-height: 2em;
            font-size: 14px;
            background-color: #fff
        }

        ::-webkit-scrollbar{display: none;}
    </style>
</head>
<body>
<div class="chat_area" style="display: none;z-index: 10000;width: 100%;height: 100%;position:absolute;border-radius: 20px;background-color: rgba(0, 0, 0, 0.03)" id="load_div"></div>
<div class="chat_area">
    <div class="anchor_list" style="width: 320px">
        <div class="total_title"><strong>房管列表</strong><span>{$count}</span></div>
        <div class="anchor_search anchorSearch"><input name="mgr_name" id="mgr_name" value="" placeholder="输入房管ID或昵称按回车搜索" autocomplete="off"></div>
        <div class="anchor_group_list">
            <ul id="privateCahtList">
                <?php if (empty($list)) { ?>
                <li style="text-align: center;display: block;height: 25px;line-height:25px" id="search_res">暂无数据</li>
                <?php }else{?>
                <?php foreach($list as $value){?>
                    <li onclick="user_list(this,{$value['mgrid']})" data-mgrid="{$value['mgrid']}" data-nick_name="<?php echo $value['nick_name']; ?>">

                        <div class="avatar"><img src="<?php echo $value['avatar']; ?>"></div>
                        <div class="nick_id">
                            <p>{$value['nick_name']}</p>
                            <p>ID:{$value['mgrid']}</p>
                        </div>
                        <div class="gchat_count">私聊人数({$value['count']})</div>
                    </li>
                <?php }?>
                <?php }?>
            </ul>
        </div>
    </div>

    <div class="layui-body chattab_body" id="LAY_chat_body" style="left: 330px;padding: 10px 10px;">
        <div class="layadmin-tabsbody-item layui-show" style="height: 100%">
            <div class="chat_right" style="">
                <!--会话列表-->
                <div class="chat_session">
                    <div class="session_area" style="height: 100%;width:300px;" id="session_area">
                        <div class="chat_not_list">请选择房管列表内容获取私聊列表</div>
                    </div>

                    <div class="chat_user" style="width: calc(100% - 310px);" id="chatUserArea" >
                        <div class="user_info" style="background-color: #06a8a1;border-top-left-radius:20px;border-top-right-radius: 20px;color: #FFFFFF;padding: 0px 10px 0px 20px;height:55px;line-height: 55px;">
                            <div class="layui-form">
                                <div class="layui-form-item" id="chatUserInfo">
                                    <div class="layui-inline" id="created_at"></div>
                                    <div class="layui-inline show_group_info showGroupInfo" id="search_chat_content"></div>
                                </div>
                            </div>
                        </div>
                        <div class="chat_cont_list" id="imTalkList" style=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/layuiadmin/layui/layui.js"></script>
<script src="/static/jquery-3.5.0.min.js"></script>

<script>
    mgr_id = 0;
    mgr_user_id = 0;
    pageIndex = 1;
    pageCount = 0;
    chat_user_click = 0;
    layui.config({
        base: "/layuiadmin/" //静态资源所在路径
    }).extend({
        index: "lib/index", //主入口模块
    }).use(['form'], function () {
        $ = layui.jquery, form = layui.form;

        $('#imTalkList').scroll(function () {
            if ($('#imTalkList').scrollTop() == 0 && pageIndex < pageCount) {
                if (mgr_id && mgr_user_id) {
                    chat_log(mgr_id, mgr_user_id, pageIndex + 1, false);
                }
            }
        });

        // 主要是用户设置弹窗操作执行关闭问题
        $(window).click(function () {
            $('.removeMsg').remove();
        });

        $('body').on('click', '#imTalkList .del_message .view_img', function (ev) {
            var e = ev || window.event;
            e.stopPropagation();
            let $panel = $(this);
            // 显示弹窗
            $('.removeMsg').remove();
            $panel.append(`<div class="del_msg removeMsg">
                    <p class="del_message_btn">删除</p>
                </div>`);
        });

        $('body').on('click', '#imTalkList .del_message dd', function (ev) {
            var e = ev || window.event;
            e.stopPropagation();
            let $panel = $(this);
            // 显示弹窗
            $('.removeMsg').remove();
            $panel.append(`<div class="del_msg removeMsg">
                    <p class="del_message_btn">删除</p>
                </div>`);
        });

        // 消息删除
        $('body').on('click', '#imTalkList .del_message_btn', function () {
            let panel_dl = $(this).parents('dl').eq(0);

            let id = panel_dl.data('id');
            if (id < 1) {
                return layer.msg('参数错误');
            }

            layer.load();
            $.ajax({
                type: 'POST',
                url: '/admin/groupchat/del_mgr_message',
                data: {id: id},
                dataType: 'json',
                success: function (res) {
                    layer.closeAll("loading");
                    if (res.code == 0) {
                        panel_dl.remove();
                        layer.msg(res.msg, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                },
                error: function (xhr, status, error) {
                    layer.closeAll("loading");
                },
                complete: function (xhr, status) {
                    layer.closeAll("loading");
                }
            });
        });

        // 左侧会话列表点击切换
        $('body').on('click', '#mgr_user_list .dd_user', function () {
            if ($(this).hasClass('active')) {
                //return false;
            }

            mgr_user_id = $(this).data('user_id');
            $("#mgr_user_list>.dd_user").removeClass('active');
            $(this).addClass('active');
            $("#chat_not_log").remove();
            $("#notHistoryMsg").remove();
            $("#imTalkList").html('');
            $('#created_at').text('创建时间:' + $(this).data('created_at'));
            $('#search_chat_content').html('<input name="content" id="chat_content" value="" placeholder="输入内容搜索" style="width:180px;height: 30px;border-radius:5px;border:0px;padding: 0px 3px" autocomplete="off">\n' +
                '                                        <div id="FormSubmit" class="layui-btn" style="height:30px;line-height: 30px;padding:0px 3px;border-radius: 5px;background-color:#06a8a1;">\n' +
                '                                            <script>\n' +
                '                                               $("#FormSubmit").click(function () {\n' +
                '                                                   if (mgr_id && mgr_user_id) {\n' +
                '                                                       pageIndex = 1;\n' +
                '                                                       pageCount = 0;\n' +
                '                                                       $("#imTalkList").html(\'\');\n' +
                '                                                           chat_log(mgr_id, mgr_user_id, 1, true);\n' +
                '                                                       }\n' +
                '                                                  });\n' +
                '                                               <\/script>\n' +
                '                                            <i class="layui-icon layui-icon-search" style="font-size: 24px"></i>\n' +
                '                                        </div>'
            );
            pageIndex = 1;
            pageCount = 0;
            if (mgr_id && mgr_user_id) {
                chat_log(mgr_id, mgr_user_id, 1, true);
            }

        });

        $('#mgr_name').on({
            keydown: function (ev) {
                var e = ev || window.event;
                if (e.keyCode == 13) {
                    e.preventDefault();
                    let mgr_name = $('#mgr_name').val();
                    if (mgr_name) {
                        $("#privateCahtList>li").hide();
                        var search_res = false;
                        $.each($("#privateCahtList>li"), function (index, e) {
                            let str_mgrid = $(e).data('mgrid') + ' ';
                            let str_nick_name = $(e).data('nick_name') + ' ';
                            if (str_mgrid.indexOf(mgr_name) != -1) {
                                search_res = true;
                                $(e).show();
                            } else if (str_nick_name.indexOf(mgr_name) != -1) {
                                search_res = true;
                                $(e).show();
                            }
                        });

                        if (!search_res) {
                            $("#privateCahtList").append('<li style="text-align: center;display: block;height: 25px;line-height:25px" id="search_res">暂无数据</li>');
                        }
                    } else {
                        $("#search_res").remove();
                        $("#privateCahtList>li").show();
                    }
                }
            },
        });
    });

    function user_list(obj, mgrid) {
        if (mgr_id == mgrid) {
            //return false;
        }

        mgr_id = mgrid;
        mgr_user_id = 0;
        pageIndex = 1;
        pageCount = 0;
        if (!mgrid || mgrid < 1) {
            layer.msg('请选择房管', {icon: 2});
            return false;
        }
        $("#privateCahtList>li").removeClass('active');
        $(obj).addClass('active');
        $("#chat_not_list").remove();
        $("#session_area").html('<div class="total_title" style="padding-left:20px;padding-top:20px"><strong>私聊列表</strong><span id="mgr_user_count">0</span></div>\n' +
            '        <div class="anchor_search anchorSearch"><input name="anchor_name" id="mgr_user_name" value="" placeholder="输入用户ID或昵称按回车搜索" autocomplete="off">\n' +
            '<script>\n' +
            '    $(\'#mgr_user_name\').on({\n' +
            '        keydown: function (ev) {\n' +
            '            var e = ev || window.event;\n' +
            '            if (e.keyCode == 13) {\n' +
            '                $("#mgr_user_list").html("");\n' +
            '                e.preventDefault();\n' +
            '                user_list_common(mgr_id, 1);\n' +
            '            }\n' +
            '        },\n' +
            '    });\n' +
            '<\/script></div>' +
            '        <div class="chat_list chatList" style="margin-top: 0px" id="mgr_user_list"></div>'
        );
        $('#created_at').text('');
        $('#search_chat_content').html('');
        $("#imTalkList").html('<div style="position: relative;" id="notHistoryMsg"><div class=""><div class="Separator" style="margin-top: 1em;">\n' +
            '                                        <hr class="separator__hr">\n' +
            '                                        <div class="separator__text">\n' +
            '                                            <span>请选择左侧的私聊列表查看聊天记录</span>\n' +
            '                                        </div>\n' +
            '                                    </div>\n' +
            '                                </div>\n' +
            '                            </div>'
        );
        user_list_common(mgrid, 1);
    }

    function user_list_page(page) {
        user_list_common(mgr_id, page);
    }

    function user_list_common(mgrid, page) {
        let user_name = $("#mgr_user_name").val();
        if (!user_name) {
            user_name = '';
        }
        $.ajax({
            url: '/admin/groupchat/mgr_user_list',
            type: 'post',
            data: {mgrid: mgrid, user_name: user_name, page: page},
            dataType: 'json',
            beforeSend: function () { //当一个Ajax请求开始时触发
                $("#load_div").show();
            },
            success: function (data) {
                $("#load_div").hide();
                $("#chat_page").remove();
                $("#user_list_page").remove();
                var list = data.list;
                var htmlStr = '';
                $("#mgr_user_count").text(data.count);
                for (var i = 0; i < list.length; i++) {
                    htmlStr += '<dd class="dd_user" data-created_at="' + list[i].created_at + '" data-user_id="' + list[i].user.id + '">';
                    htmlStr += '<div class="device_icon icon_web" style="background-image: url(\'' + list[i].user.avatar + '\')"></div>';
                    htmlStr += '<div class="user_chat_desc"><p><span class="nick_name" style="width: 230px;max-width:230px">' + list[i].user.nick_name + '</span></p><p class="last_reply_msg">ID：' + list[i].user.id + '</p></div>';
                    htmlStr += '</dd>';
                }

                if (data.count != 0 && data.pageCount > page) {
                    htmlStr += '<a href="javascript:;" id="chat_page" style="width:100%;height:20px;text-align: center;background-color: #06a8a1;display: block;color:#FFFFFF;border-radius:5px;margin-bottom: 40px" id="user_list_page" onclick="user_list_page(' + (page + 1) + ')">加载更多</a>';
                } else if (data.count == 0) {
                    htmlStr += '<a href="javascript:;"  style="width:100%;height:30px;line-height:30px;text-align: center;background-color: #d5f1f0;display: block;border-radius:5px">暂无数据</a>';
                } else if (data.count != 0 && data.pageCount == page) {
                    htmlStr += '<a href="javascript:;"  style="width:100%;height:30px;line-height:30px;text-align: center;display: block;border-radius:5px"></a>';
                }

                if (htmlStr) {
                    $("#mgr_user_list").append(htmlStr);
                }
            },
            error: function (res) {
                $("#load_div").hide();
            }
        });
    }

    function chat_log(mgr_id, user_id, page, is_bottom) {
        var content = $("#chat_content").val();
        $.ajax({
            url: '/admin/groupchat/mgr_chat_log',
            type: 'post',
            data: {mgr_id: mgr_id, user_id: user_id, page: page, content: content},
            dataType: 'json',
            beforeSend: function () { //当一个Ajax请求开始时触发
                $("#notHistoryMsg").remove();
                $("#load_div").show();
                $('#imTalkList').prepend('<div style="position: relative;" id="notHistoryMsg"><div class=""><div class="Separator"><hr class="separator__hr"><div class="separator__text"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i><span>聊天内容加载中...</span></div></div></div></div>');
                //layer.load(0, {shade: [0.1,'#fff'],offset:[ $('#chat_log').offset().top + 'px',($('#chat_log').offset().left + 100) + 'px']});
            },
            success: function (data) {
                //layer.closeAll();
                $("#load_div").hide();
                $("#notHistoryMsg").remove();
                if (data.code == 0) {
                    var list = data.list;
                    var htmlStr = '';

                    //content
                    for (var i = list.length - 1; i >= 0; i--) {
                        htmlStr += '<dl class="chat_cont_info del_message" data-id="' + list[i].id +'">';
                        htmlStr += '<dt>' + list[i].nickname + '';
                        if (list[i].role == 1) {
                            htmlStr += '<span style="background-color: #02A8A2;padding:0px 8px;font-size:14px;color:#FFF;border-radius:5px;margin-left: 5px;">房管</span>';
                        }

                        htmlStr += '<span>' + list[i].send_time + '</span></dt>';

                        if (list[i].image_url.length > 0) {
                            htmlStr += '<div class="view_img" style="position: relative;"><img src="' + list[i].image_url + '" ondblclick="view_img(\'' + list[i].image_url +'\')" style="max-width: 350px;max-height: 260px;width: auto;height: auto;margin-top: 15px" title="双击查看图片"></div>';
                        } else {
                            htmlStr += '<dd>' + list[i].content + '</dd>';
                        }

                        htmlStr += '</dl>';
                    }

                    var scrollHeight = $('#imTalkList')[0].scrollHeight;

                    if (page == 1) {
                        htmlStr += '<dl class="chat_cont_info" style="margin-bottom: 80px"></dl>';
                    }

                    if (htmlStr) {
                        $('#imTalkList').prepend(htmlStr);
                        pageIndex = data.page;
                        pageCount = data.pageCount;

                        if (data.pageCount == 0 || data.page == data.pageCount) {
                            $("#imTalkList").prepend('<div style="position: relative;" id="notHistoryMsg"><div class=""><div class="Separator"><hr class="separator__hr"><div class="separator__text">没有更多历史消息了~</div></div></div></div>');
                        }

                        if (is_bottom) {
                            $('#imTalkList').scrollTop($('#imTalkList')[0].scrollHeight);
                        } else {
                            $('#imTalkList').scrollTop($('#imTalkList')[0].scrollHeight - scrollHeight);
                        }
                    } else {
                        if (data.pageCount == 0) {
                            $("#imTalkList").prepend('<div style="position: relative;" id="notHistoryMsg"><div class=""><div class="Separator"><hr class="separator__hr"><div class="separator__text">没有更多历史消息了~</div></div></div></div>');
                        }
                    }

                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            },
            error: function (res) {
                $("#load_div").hide();
                $("#notHistoryMsg").remove();
                //layer.closeAll();
            }
        });
    }

    function view_img(src) {
        if (src) {
            layer.photos({
                photos: {
                    "title": "",
                    "data": [{
                        "src": src,
                    }]
                }
                , shade: 0.01
                , closeBtn: 1
            });
        }
    }
</script>
</body>
</html>